<template>
	<view class="az-tools">
		<uni-grid :column="3" :showBorder="false">
			<uni-grid-item @click="goRouter(item)" class="az-grid-item" v-for="item in gridList" :key="item.id">
				<uni-icons :type="item.icon" :size="30" color="#777" />
				<text class="az-text">{{item.title}}</text>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script setup>
	import {
		reactive
	} from "vue"
	const gridList = reactive([{
			title: "openai 推送",
			id: 'az-0',
			icon: "paperplane-filled"
		}, {
			title: "学习笔记",
			id: 'az-1',
			icon: "list"
		}, {
			title: "C语言",
			id: 'az-2',
			icon: "color-filled"
		},
		{
			title: "节气日历",
			id: 'az-3',
			icon: "calendar"
		}
	])
	const goRouter = (e) => {
		console.log(e);
		console.log(e.id);
		switch (e.id) {
			case 'az-0':
				uni.navigateTo({
					url: "/pages/business/toolsView/openai"
				})
				// 跳转到open ai 推送消息列表
				break;
			case 'az-1':

				// 跳转到open ai 推送消息列表
				break;
			case 'az-2':

				// 跳转到open ai 推送消息列表
				break;
			case 'az-3':

				// 跳转到open ai 推送消息列表
				break;

			default:
				console.log("默认 none")
				break;
		}
	}
</script>

<style>
	.az-grid-item {
		height: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	:deep(.uni-grid-item__box) {
		height: 100%;
		justify-content: center;
	}

	.az-text {
		margin-top: 10px;
	}

	.az-text {
		text-align: center;
	}
</style>